<template>
  <div>
    <h1>姓名:{{ name }}</h1>
    <h1>年龄:{{ age }}</h1>
    <h1>类型:{{ job.type }}</h1>
    <h1>薪水:{{ job.salary }}</h1>
    <button @click="changeInfo()">修改信息</button>
  </div>
</template>

<script>
import {ref} from 'vue'
export default {
  name: "App",
  setup() {
    let name = ref("JJ");
    let age = ref(18);
    let job =ref({
      type:"前端工程师",
      salary:"30k"
    })

    function changeInfo()
    {
      // name.value="张三"
      // age.value=20
      job.value.type="UI设计师"
      console.log(job.value)
    }

    //返回一个对象，常用
    return {
      name,
      age,
      job,
      changeInfo
    };
   
  }
};
</script>

<style>
</style>
